<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>

<body>

	<style type="text/css">
		.ibox-border {
			border:0px !important ;	
		}
		
		.bg {
			border: 0px;
			color: #fff;
			border-radius: 5px;
			box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
		}
		
		.text-navy {
			color: #fff !important ;
		}	
		
		.bg-primary {
			background-color: #1c84c6 !important;
		}
		
		.bg-danger {
			background-color: #ed5565 !important;
		}
		
		.bg-success {
			background-color: #f8ac59 !important;
		}
	</style>

	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">

				<div class="row">
					<div class="col-sm-4">
						<div class="ibox ibox-border">
							<div class="ibox-content bg bg-primary">
								<h5>收入</h5>
								<h1 class="no-margins">886,200</h1>
								<div class="stat-percent font-bold text-navy">
									98% <i class="fa fa-bolt"></i>
								</div>
								<small>总收入</small>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="ibox ibox-border">
							<div class="ibox-content bg bg-success">
								<h5>本月收入</h5>
								<h1 class="no-margins">1 738,200</h1>
								<div class="stat-percent font-bold text-navy">
									98% <i class="fa fa-bolt"></i>
								</div>
								<small>总收入</small>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="ibox ibox-border">
							<div class="ibox-content bg bg-danger">
								<h5>本日收入</h5>
								<h1 class="no-margins">-200,100</h1>
								<div class="stat-percent font-bold text-danger">
									12% <i class="fa fa-level-down"></i>
								</div>
								<small>总收入</small>
							</div>
						</div>
					</div>
				</div>

				<div class="ibox float-e-margins">
					<div class="ibox-title">
                        <h5>柱状图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
				</div>

				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>Java虚拟机信息</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">

						<div class="row">
							<div class="col-sm-12">
								<table class="table table-hover margin bottom">
									<tbody>
										<tr>
											<td>Java名称</td>
											<td>OpenJDK 64-Bit Server VM</td>
											<td>Java版本</td>
											<td>1.8.0_111</td>
										</tr>
										<tr>
											<td>启动时间</td>
											<td>2019-11-02 04:43:30</td>
											<td>运行时长</td>
											<td>1天12小时5分钟</td>
										</tr>
										<tr>
											<td colspan="1">安装路径</td>
											<td colspan="3">/usr/lib/jvm/java-8-openjdk-amd64/jre</td>
										</tr>
										<tr>
											<td colspan="1">项目路径</td>
											<td colspan="3">/</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	<script th:src="@{/asserts/ajax/libs/report/echarts/echarts-all.js}"></script>

	<script type="text/javascript">
		$(function(){
			var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
	        var baroption = {
	            title : {
	                text: '某地区蒸发量和降水量'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['蒸发量','降水量']
	            },
	            grid:{
	                x:30,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value'
	                }
	            ],
	            series : [
	                {
	                    name:'蒸发量',
	                    type:'bar',
	                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
	                    markPoint : {
	                        data : [
	                            {type : 'max', name: '最大值'},
	                            {type : 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name: '平均值'}
	                        ]
	                    }
	                },
	                {
	                    name:'降水量',
	                    type:'bar',
	                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
	                    markPoint : {
	                        data : [
	                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
	                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name : '平均值'}
	                        ]
	                    }
	                }
	            ]
	        };
	        barChart.setOption(baroption);
	        window.onresize = barChart.resize;
		}) ;
	</script>	
	
</body>
</html>

